/*
* @Title: 附近的人模块
* @Created by: gsjPC
*/
<template>
	<view class="tab-chat-content">

		<!-- 设置 -->
		<view class="setting-line">
			<view @click="showSettingAction" class="iconfont" >
				&#xe676;
			</view>
		</view>

		<!-- 设置弹出的 ActionSheet -->
		<uni-popup style="z-index:9999;" @change="popChangeHandle" ref="setpopup" type="bottom" :maskClick="true" :show="settingPopShow">
			<view class="set-pop-wrap" :style="{ marginBottom: navigationBarHeight }">
				<ul>
					
					<li>
						<view>
							<text>选择年龄</text>
						</view>
						<!-- <slider value="60" @change="sliderChange" step="5" /> -->
						<slider-range style="width:100%!important;" :value="ageRangeValue" :min="ageRageConfig.min" :max="ageRageConfig.max"
						 :step="ageRageConfig.step" :bar-height="5" :block-size="60" background-color="#EEEEF6" active-color="rgb(0, 122, 255)"
						 :format="format" :decorationVisible="true" @rangechange="handleRangeChange"></slider-range>
						<view class="age-text-bar">
							<text>{{ ageRageConfig.min }}</text>
							<text class="age-text-rangeText">{{ `${ageRangeValue[0]} ~ ${ageRangeValue[1]} 岁` }}</text>
							<text>{{ ageRageConfig.max }}</text>
						</view>
					</li>
					<li>
						<view>选择距离</view>
						<slider :min="distanceConfig.min" :max="distanceConfig.max" :value="distanceValue" @change="sliderChange" step="1" />
						<!-- <text>{{ distanceValue }} km 以内</text> -->
						<view class="age-text-bar">
							<text>{{ distanceConfig.min }}</text>
							<text class="age-text-rangeText">{{ `${distanceValue} km 以内` }}</text>
							<text>{{ distanceConfig.max }}</text>
						</view>
					</li>
					<li @click="girlsOnly">只看女生</li>
					<li @click="boysOnly">只看男生</li>
					<li @click="allSexCheck">查看全部</li>
					<li @click="clearLocation">清除位置</li>
				</ul>
				<view class="set-popup-cancel" @click="closeSetPop">
					确定
				</view>
			</view>
		</uni-popup>

		<view class="tab-chat-content-item" v-for="(near, index) in nearByListUse">
			<view class="tab-chat-content-item-left">
				<image class="tab-chat-content-item-left-avatar" src="/static/testTx1.jpg" mode=""></image>
				<view class="tab-chat-content-item-left-corner">
					<!-- <image src="/static/chat_avatar_corner.png" mode=""></image> -->
					<!-- 	<text>5</text> -->
				</view>
			</view>

			<view class="tab-chat-content-item-right">
				<view class="item-left-part">
					<view>
						<view class="tab-chat-content-item-right-line1">

							<!-- 显示性别 -->
							<view class="sexIcon female" v-if="near.sex == 0">
								<view class="iconfont" >&#xe649;

								</view>
							</view>

							<view class="sexIcon male" v-else>
								<view class="iconfont" >&#xe669;
								</view>
							</view>

							<text>{{ near.name }}</text>
						</view>
						<view class="tab-chat-content-item-right-line2">
							{{ near.distance }} km 以内
						</view>
					</view>



				</view>
				<view class="sign">
					<text>人生若如初见，人生若如初见人生若如初见人生若如初见</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import SliderRange from '@/components/range-slider/range-slider.vue'
	export default {
		data() {
			return {
				nearByList: [{
					name: '歪果儿',
					sex: 0,
					age: 25,
					distance: 5
				}, {
					name: '歪果儿',
					sex: 1,
					age: 55,
					distance: 120
				}, {
					name: '歪果儿',
					sex: 1,
					age: 100,
					distance: 180
				}, ],
				nearByListUse: [{
					name: '歪果儿',
					sex: 0,
					age: 25,
					distance: 5
				}, {
					name: '歪果儿',
					sex: 1,
					age: 55,
					distance: 120
				}, {
					name: '歪果儿',
					sex: 1,
					age: 100,
					distance: 180
				}, ],
				onlyCheckGirls: false,
				onlyCheckBoys: false,
				ageRageConfig: {
					max: 200,
					min: 0,
					step: 1
				},
				ageRangeValue: [0, 200], // 年龄范围
				distanceConfig: {
					min: 0,
					max: 999
				},
				distanceValue: 60, // 距离（多少km之内）
				settingPopShow: false, // 设置弹框是否显示
				navigationBarHeight: global.navigationBarHeight + 'px'
			}
		},

		watch: {
			ageRangeValue(val) {
				console.log(val)
				console.log(123123)
			}
		},
		methods: {
			popChangeHandle({show}){
				
				console.warn(show);
				// #ifdef H5
				this.settingPopShow = show;
				// #endif
				// #ifndef H5
				this.$parent.settingPopShow = show;
				// #endif
			},
			girlsOnly() {
				this.onlyCheckGirls = true;
				this.onlyCheckBoys = false;
				// this.nearByListUse = this.nearByList.filter( near => near.sex == 0);
				this.closeSetPop();
			},
			boysOnly() {
				this.onlyCheckGirls = false;
				this.onlyCheckBoys = true;
				// this.nearByListUse = this.nearByList.filter( near => near.sex == 1);
				this.closeSetPop();
			},
			allSexCheck() {
				this.nearByListUse = this.nearByList;
				this.closeSetPop();
			},
			// 清楚位置
			clearLocation() {
				uni.showToast({
					title: '地理位置已清除'
				});
				this.closeSetPop();

			},
			sliderChange(e) {
				console.log(e);
				this.distanceValue = e.detail.value;
			},
			format(val) {
				return val
			},
			handleRangeChange(e) {
				console.log(e)
				// this.ageRangeValue = e
				this.ageRangeValue = [e.minValue, e.maxValue];
			},
			showSettingAction() {
				this.settingPopShow = true;
			},
			showSetPop() {
				this.$refs.setpopup.open();
			},
			// 关闭弹窗
			closeSetPop() {
				// this.$refs.setpopup.close();
				this.settingPopShow = false;
				this.nearByListUse = this.nearByList.filter(near => {
					let ageAndRageCondition = near.age >= this.ageRangeValue[0] && near.age <= this.ageRangeValue[1] && near.distance <=
						this.distanceValue
					let boysCondition = this.onlyCheckBoys ? near.sex == 1 : true;
					let girlsCondition = this.onlyCheckGirls ? near.sex == 0 : true;
					console.log(`年龄: ${ageAndRageCondition}  男孩: ${boysCondition}  女孩: ${girlsCondition}`)
					return ageAndRageCondition && boysCondition && girlsCondition;
				})
			}
		},

		components: {
			uniPopup,
			SliderRange
		}
	}
</script>

<style>
	/* @font-face {
	  font-family: 'iconfont';
	  src: url('../../common/iconfont/iconfont.eot');
	  src: url('../../common/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
	      url('../../common/iconfont/iconfont.woff2') format('woff2'),
	      url('../../common/iconfont/iconfont.woff') format('woff'),
	      url('../../common/iconfont/iconfont.ttf') format('truetype'),
	      url('../../common/iconfont/iconfont.svg#iconfont') format('svg');
	}
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	} */
	.tab-chat-content {
		width: 100%;
		overflow: hidden;
	}

	.tab-chat-content-item {
		height: 90upx;
		display: flex;
		align-items: center;
		margin-bottom: 50upx;
	}

	.tab-chat-content-item-left {
		width: 90upx;
		height: 90upx;
		box-shadow: 0 0 5upx 5upx rgba(0, 0, 0, .1);
		margin-right: 20upx;
		flex-shrink: 0;
		position: relative;
	}

	.tab-chat-content-item-left-corner {
		position: absolute;
		right: 0;
		top: 0;
		width: 40upx;
		height: 40upx;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		padding: 0upx 4upx 0 0;
	}

	.tab-chat-content-item-left-corner image {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.tab-chat-content-item-left-corner text {
		color: #fff;
		z-index: 50;
		font-size: 20upx;
		line-height: 1.3;
	}

	.tab-chat-content-item-left-avatar {
		width: 100%;
		height: 100%;
	}

	.tab-chat-content-item-right {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}


	.item-left-part {
		display: flex;
	}

	.sexIcon {
		width: 30upx;
		height: 30upx;
		margin-top: -5upx;
		margin-right: 5upx;
	}

	.sexIcon.female view {
		color: #FF4A60;
	}

	.sexIcon.male view {
		color: #5FB3D5;
	}

	.sexIcon svg {
		width: 100%;
		height: 100%;
	}

	.tab-chat-content-item-right-line1 {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		margin-bottom: 18upx;
	}

	.tab-chat-content-item-right-line1 text {
		font-size: 28upx;
		color: #000000;
	}

	.tab-chat-content-item-right-line2 {
		font-size: 24upx;
		color: rgba(178, 178, 178, 1);
	}

	.sign {
		max-width: 140upx;
		line-height: 26upx;
		max-height: 48upx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		font-size: 18upx;
		color: #999999;
		background: #F4F2F2;
		padding: 6upx 10upx;
		border-radius: 10upx;
	}

	/* 设置 */
	.setting-line {
		width: 100%;
		display: flex;
		padding-right: 50upx;
		box-sizing: border-box;
		justify-content: flex-end;
		margin-bottom: 10upx;
	}

	.setting-line svg {
		width: 50upx;
		height: 50upx;
		fill: #333;
	}

	/* 设置弹出的 ActionSheet */
	.set-pop-wrap {
		max-width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		/* margin-bottom: 100upx; */
	}

	ul {
		list-style: none;
		padding: 0;
	}

	.set-pop-wrap li {
		text-align: center;
		padding: 20upx 0;
		border-bottom: 1upx solid #eee;
		font-size: 24upx;
	}

	.set-pop-wrap li>view {
		text-align: left;
		font-size: 24upx;
	}

	.age-text-bar {
		display: flex;
	}

	.age-text-bar text {
		flex-basis: 20%;
	}

	.age-text-bar text.age-text-rangeText {
		flex-basis: 60%;
		text-align: center;
	}

	.age-text-bar text:last-child {
		text-align: right;
	}

	.set-popup-cancel {
		text-align: center;
		border-top: 15upx solid #ccc;
		padding: 20upx 0;
	}
</style>
